<!-- src/components/SvgIcon.vue -->
<template>
  <!-- 简单使用，就直接引入 IconifyIcon，并传入参数class和icon -->
  <!-- 增加图标外链模式， 需要判断是否是外链的图标： isExternal -->
  <IconifyIcon
    :icon="iconName"
    :class="svgClass"
    v-if="!isExt"
    v-bind="$attrs"
  ></IconifyIcon>
  <!-- 这里最好是使用v-bind绑定其余属性，保证点击效果是针对图标 -->
  <div
    v-else
    :style="styleExternalIcon"
    :class="svgClass"
    bg-current
    v-bind="$attrs"
  ></div>
</template>

<script lang="ts" setup>
import { Icon as IconifyIcon } from "@iconify/vue";
import { isExternal } from "@/utils/validate";

// vue3.5 之前是不支持解构的， 解构的话会失去响应式
// 此处需要注意customClass可能是空值

// vue3.5中使用withDefault后进行解构一样会失去响应式
// const { iconName, customClass } = withDefaults(
//   defineProps<{
//     iconName: string;
//     customClass?: string;
//   }>(),
//   {
//     customClass: ""
//   }
// );
// const { iconName, customClass } = defineProps<{
//   iconName: string;
//   customClass?: string;
// }>();

const { iconName, customClass } = defineProps({
  iconName: { type: String, default: "" },
  customClass: { type: String, default: "" }
});

// class = customClass + icon
// 组合后的类名
const svgClass = computed(() => (customClass ? `icon ${customClass}` : "icon"));

// 判断是否是外链
const isExt = computed(() => isExternal(iconName));

// 获取svg的方式，此处采用mask的方式
// 通过mask渲染svg图标， 兼容性不好，可以通过请求svg的方式来渲染
const styleExternalIcon = computed(() => ({
  mask: `url(${iconName}) no-repeat 50% 50%`,
  "--webkit-mask": `url(${iconName}) norepeat 50% 50%`,
  "mask-size": "cover"
}));
</script>

<!-- 在实现图标的时候，尽量采用svg，不要采用font图标 -->
